<template>
  <div class="chat-wrap">
    <el-form ref="queryFormRef" :model="queryForm" :inline="true"  v-if="userRole == 1">
      <el-form-item label="销售ID:" prop="salesID">
        <el-input v-model="queryForm.salesID" style="width:200px" clearable placeholder="请输入客户名称"
          @keyup.enter="getList"></el-input>
      </el-form-item>
      <el-form-item label="推荐人ID:" prop="referrerID">
        <el-input v-model="queryForm.referrerID" style="width:200px" clearable placeholder="请输入客户ID"
          @keyup.enter="getList"></el-input>
      </el-form-item>
      <el-form-item label="时间选择:" prop="time">
        <el-date-picker v-model="queryForm.time" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="main">
      <div id="chat"></div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import { FunnelChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

import { chart } from './api.js'

const userRole = window.localStorage.getItem('login_role') || 1


echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  FunnelChart,
  CanvasRenderer
]);


const queryForm = reactive({
  salesID: '',
  referrerID: '',
  startTime: '',
  endTime: '',
  time: []
})

const shortcuts = [
  {
    text: '最近一天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 1)
      return [start, end]
    },
  },
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]

let chartOption = {
  title: {
    text: '客户转化漏斗图'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c}人'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['咨询人数', '面试人数', '入职成功数']
  },
  series: [
    {
      name: '客户转化漏斗图',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 0, name: '咨询人数' },
        { value: 0, name: '面试人数' },
        { value: 0, name: '入职成功数' },
      ]
    }
  ]
};
const createChat = () => {
  var chartDom = document.getElementById('chat');
  var myChart = echarts.init(chartDom);
  chartOption && myChart.setOption(chartOption);
}

const handleQuery = async () => {
  let params = {}

  if (queryForm.salesID) {
    params.salesID =  queryForm.salesID
  }
  if (queryForm.referrerID) {
    params.referrerID = queryForm.referrerID
  }
  if (queryForm.time.length) {
    params.startTime = new Date(queryForm.time[0]).getTime()
    params.endTime = new Date(queryForm.time[1]).getTime()
  }

  const res = await chart(params)
  console.log(res)
  if (0 === res.status) {
    console.log(res.data, chartOption)
    if (res && res.data) {
      chartOption.series[0].data[0].value = res.data.zx_num
      chartOption.series[0].data[0].name = `咨询人数(${res.data.zx_num})人`
      chartOption.series[0].data[1].value = res.data.ms_num
      chartOption.series[0].data[1].name = `面试人数(${res.data.ms_num})人`
      chartOption.series[0].data[2].value = res.data.cj_num
      chartOption.series[0].data[2].name = `入职成功数(${res.data.cj_num})人`

      createChat()
    }
  }
}

onMounted(() => {
  setTimeout(() => {
    handleQuery()
  }, 200)
})


</script>
<style lang="scss" scoped>
#chat {
  width: 700px;
  height: 700px;
}
</style>